<template>
  <!-- 基础配置页面 -->
  <div>
    <div class="header">
      <el-button type="success" @click="xinzeng">新增</el-button>
    </div>
    <div class="content">
      <!-- 表格内容 -->
      <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%;margin-top:20px">
        <el-table-column
          align="center"
          type="index"
          label="序号">
        </el-table-column>
         <el-table-column
          align="center"
          prop="id"
          label="编号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          align="center"
          label="值">
          <template slot-scope="scope">
            <div v-if="judgeHandler(scope.row.val)">
                  <el-image                 
                    style="width: 40px; height: 40px"
                    :src="scope.row.val"
                    :preview-src-list="[scope.row.val]">                 
                  </el-image>
            </div>
            <p v-else>{{scope.row.val}}</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="introduce"
          label="介绍">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="editProduct(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="shanchu(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="dialogClose">
        <!-- 新增 表单 -->
        <el-form :model="form" ref="product_form" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="介绍" prop="introduce">
            <el-input v-model="form.introduce"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="form.val_1">
              <el-option label="文字" value="form.val_1"></el-option>
              <el-option label="图片" :value="form.val_2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="值" prop="val" v-if="form.val_1" >
            <el-input v-model="form.val"></el-input>
          </el-form-item>
          <el-form-item label="图片上传" prop="val" v-else>
                <el-upload
                  class="avatar-uploader"
                  :action="uploadFileURL"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :before-upload="beforeUpload"
                >
                  <img v-if="imageUrl" :src="form.val" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
          </el-form-item>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="queding">确 定</el-button>
        </div>
     </el-dialog>
     <!-- footer尾部 -->
    <div id="footer">
      <!-- 分页组件 -->
      <el-pagination align="center" :current-page="currentPage" :page-sizes=" [6,4,2,1]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
// 引入axios
import { get, post } from "@/utils/request";
// 引入文件上传路径 和 文件预览的路径
import { showFileURL, uploadFileURL } from '@/utils/config'
export default {
  data() {
    return {
     imageUrl:'',
      uploadFileURL,
      tableData:[],
      // 新增form
      form:{
        name:'',
        val:'',
        introduce:'',
        val_1:'文字',
        val_2:'',
        
      },
      dialogVisible:false,
      dialogTitle:'',
       // 获取用户列表的参数对象
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 6, // 每页的数据条数
      
    };
  },
  computed: {},
  methods: {
     // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    },
    // 编辑
    editProduct(row) {
      // 将当前点击的这一行的对象 赋值到 表单对象里
      // 浅拷贝 赋值对象的引用 对象的内存地址 用的还是用一个 this.productForm = row };
      // 深拷贝
      this.form = { ...row };
      // 预览图片 地址赋值
        this.imageUrl = this.form.val; 
      // 设置模态框的标题
      this.dialogTitle = "编辑基础配置";
      // 模态框显示出来
      this.dialogVisible = true;
      console.log(this.form.val)
    },
    // 新增确定
   async queding(){    
      let res=await post('/baseConfig/saveOrUpdate',this.form)
       if (res.status == 200) {
            this.$message({
              message: '添加成功',
              type: "success",
            });
            // 重新刷新页面的数据
            this.getAllData()
          } else {
            this.$message.error('添加失败');
          }
       this.dialogVisible=false; 
    },
    // 新增
    xinzeng(){
      this.dialogVisible=true;
      this.dialogTitle='新增基础配置'
        // 重置表单
      this.form={   
      }
    },
    // 删除
   async shanchu(id){
     let data={id:id}
     let res=await get('/baseConfig/deleteById',data)
      if (res) {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllData();
      } else {
        this.$message.error('删除失败')
      }    
    },
    // 关闭模态框
    dialogClose(){
      this.dialogVisible=false
    },
    // 获取所有信息
    async getAllData(){
      let res=await get('/baseConfig/findAll');
      this.tableData=res.data;
    },
    // 判断是否图片
     judgeHandler(val) {
      var bool;
      var sub = val.substring(val.lastIndexOf(".") + 1, val.length);
      if (sub === "jpg" || sub === "jpeg" || sub === "png") {
        bool = true;
      } else {
        bool = false;
      }
      return bool;
    },
     /**
     * @description: 上传成功之后 调用方法
     * @param {*} res 上传成功后回调的参数
     * @param {*} file 文件
     * @return {*}
     * @author: ZachGmy
     */
    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      // 上传成功之后 更新productForm.photo的路径
      this.form.val = showFileURL+res.data.id
      console.log(res.data)
    },
    /**
     * @description: 上传之前 要做的一些限制
     * @param {*} file
     * @return {*}
     * @author: ZachGmy
     */
    beforeUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
      }
    },
  },
  created() {
    // 自动获取所有信息
    this.getAllData()

  },
  mounted() {},
};
</script>
<style scoped>
#footer {
  position: fixed;
  bottom: 40px;
  right: 10px;
}
</style>